import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:get/get.dart';
import 'package:yp/config/index.dart';
import 'package:yp/pages/mall_app/surplus_market/logic.dart';
import 'package:yp/router.dart';
import 'package:yp/utils/util.dart';
import 'package:yp/widgets/index.dart';

import 'state.dart';

class SurplusMarketPage extends StatefulWidget {
  SurplusMarketPage({Key key}) : super(key: key);

  @override
  _SurplusMarketPageState createState() => _SurplusMarketPageState();
}

class _SurplusMarketPageState extends State<SurplusMarketPage> {
  Widget _tabWidget({
    List catDetails,
    int tabId,
    Function(int id) changeTabId,
  }) {
    return Container(
      color: EsColors.Primary,
      alignment: Alignment.centerLeft,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(
            catDetails.length,
            (index) => InkWell(
              onTap: () {
                changeTabId(catDetails[index]['cat1_id']);
              },
              child: Container(
                padding: const EdgeInsets.only(left: 10, right: 10, bottom: 6),
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 5),
                      child: Text(
                        catDetails[index]['cat_name'],
                        style: TextStyle(
                          color: const Color(0xffffffff),
                          fontWeight: FontWeight.bold,
                          fontSize:
                              tabId == catDetails[index]['cat1_id'] ? 18 : 15,
                        ),
                      ),
                    ),
                    tabId == catDetails[index]['cat1_id']
                        ? Container(
                            decoration: BoxDecoration(
                              color: const Color(0xffffffff),
                            ),
                            height: 3,
                            width: 20,
                          )
                        : SizedBox(),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SurplusMarketLogic>(
        init: SurplusMarketLogic(),
        builder: (logic) {
          SurplusMarketState state = logic.state;
          Size size = MediaQuery.of(context).size;
          return Scaffold(
            appBar: YPNavigationBar(
              '超级团',
              backgroundColor: EsColors.Primary,
              backBtnColor: const Color(0xffffffff),
              showLine: false,
              titleColor: const Color(0xffffffff),
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.share),
                    color: Colors.white70,
                    onPressed: () {
                      logic.shareToFriend();
                    }) ,
              ],
            ),
            body: Container(
                color: const Color(0xfff5f5f5),
                child: Column(
                  children: [
                    state.configInfo['is_show_classify'] == 1 &&
                            state.catDetails != null &&
                            state.catDetails.length > 0
                        ? _tabWidget(
                            catDetails: state.catDetails,
                            tabId: state.tabId,
                            changeTabId: (int id) {
                              logic.changeTabId(id);
                            },
                          )
                        : SizedBox(),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                            children: [
                          state.configInfo != null &&
                                  state.configInfo['slide_images'] != null &&
                                  state.configInfo['slide_images'].length > 0
                              ? Container(
                                  width: size.width,
                                  height: size.width * .4,
                                  color: const Color(0xffffffff),
                                  child: Swiper(
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return CachedNetworkImage(
                                        imageUrl: state
                                            .configInfo['slide_images'][index],
                                        errorWidget: (context, url, error) =>
                                            Icon(Icons.error),
                                        fit: BoxFit.fill,
                                      );
                                    },
                                    itemCount:
                                        state.configInfo['slide_images'].length,
                                    viewportFraction: 1,
                                    scale: 1,
                                    // pagination: SwiperPagination(),
                                    autoplay: true,
                                  ),
                                )
                              : SizedBox(),
                        ]..addAll(state.showGoodsList != null &&
                                    state.showGoodsList.length > 0
                                ? List.generate(state.showGoodsList.length,
                                    (index) {
                                    return Container(
                                      decoration: BoxDecoration(
                                        color: const Color(0xffffffff),
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      padding: const EdgeInsets.all(8),
                                      margin: const EdgeInsets.only(
                                          left: 10, right: 10, bottom: 10),
                                      child: InkWell(
                                        onTap: () {
                                          Get.toNamed(
                                              RouteConfig.surplusMarketDetails,
                                              arguments: {
                                                'activity_id':
                                                    state.showGoodsList[index]
                                                        ['activity_id'],
                                                'item_num_id':
                                                    state.showGoodsList[index]
                                                        ['item_num_id'],
                                                'styleNumId':state.showGoodsList[index]['style_num_id'].toString(),
                                                'cat1Id':state.showGoodsList[index]['cat_id'].toString(),
                                                'shopId':state.shop_id,
                                              });
                                        },
                                        child: Row(
                                          children: [
                                            Container(
                                              width: 130,
                                              height: 130,
                                              color: const Color(0xffcccccc),
                                              child: CachedNetworkImage(
                                                imageUrl:
                                                    state.showGoodsList[index]
                                                        ['image_default_id'],
                                                errorWidget:
                                                    (context, url, error) =>
                                                        Icon(Icons.error),
                                                fit: BoxFit.fill,
                                              ),
                                            ),
                                            SizedBox(width: 8),
                                            Expanded(
                                              child: Container(
                                                alignment: Alignment.topLeft,
                                                height: 130,
                                                child: Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                    Text(
                                                      state.showGoodsList[index]
                                                          ['item_name'],
                                                      maxLines: 2,
                                                      overflow:
                                                          TextOverflow.ellipsis,
                                                      style: TextStyle(),
                                                    ),
                                                    Column(
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .start,
                                                      children: [
                                                        Container(
                                                          decoration:
                                                              BoxDecoration(
                                                            border: Border.all(
                                                                color: EsColors
                                                                    .Primary),
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        10),
                                                          ),
                                                          padding:
                                                              const EdgeInsets
                                                                      .only(
                                                                  left: 2,
                                                                  right: 2,
                                                                  bottom: 1),
                                                          child: Text(
                                                            '${state.showGoodsList[index]['g_buyer_count']}人参团',
                                                            style: TextStyle(
                                                                color: EsColors
                                                                    .Primary,
                                                                fontSize: 12),
                                                          ),
                                                        ),
                                                        Row(
                                                          mainAxisAlignment:
                                                              MainAxisAlignment
                                                                  .spaceBetween,
                                                          children: [
                                                            Row(
                                                              crossAxisAlignment:
                                                                  CrossAxisAlignment
                                                                      .end,
                                                              mainAxisSize:
                                                                  MainAxisSize
                                                                      .min,
                                                              children: [
                                                                Text(
                                                                  '￥ ${toConstraintLen(state.showGoodsList[index]['depreciate'], 3)}',
                                                                  style:
                                                                      TextStyle(
                                                                    fontSize:
                                                                        20,
                                                                    color: EsColors
                                                                        .Primary,
                                                                  ),
                                                                ),
                                                                Padding(
                                                                  padding: const EdgeInsets
                                                                          .only(
                                                                      bottom:
                                                                          2.0),
                                                                  child: Text(
                                                                      '￥${toConstraintLen(state.showGoodsList[index]['original_cost'], 3)}',
                                                                      style:
                                                                          TextStyle(
                                                                        decoration:
                                                                            TextDecoration.lineThrough,
                                                                        color: const Color(
                                                                            0xffcccccc),
                                                                      )),
                                                                ),
                                                              ],
                                                            ),
                                                            Container(
                                                              decoration:
                                                                  BoxDecoration(
                                                                color: state.showGoodsList[index]['buy']!=true?Color(0xffCCCCCC):EsColors.Primary,
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            14),
                                                              ),
                                                              padding:
                                                                  const EdgeInsets
                                                                          .only(
                                                                      left: 5,
                                                                      right: 5,
                                                                      bottom: 3,
                                                                      top: 2),
                                                              child: Text(
                                                                state.showGoodsList[index]['buy']!=true?'已售空':'去参团',
                                                                style: TextStyle(
                                                                    fontSize:
                                                                        13,
                                                                    color: const Color(
                                                                        0xffffffff)),
                                                              ),
                                                            ),
                                                          ],
                                                        ),
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    );
                                  })
                                : [
                                    Center(
                                      child: Text(
                                        '当前活动已结束',
                                        style: TextStyle(
                                            color: const Color(0xff999999)),
                                      ),
                                    )
                                  ])
                            // ..add(
                            //   Container(
                            //     alignment: Alignment.center,
                            //     padding: const EdgeInsets.only(bottom: 5),
                            //     child: Text(
                            //       '~到底了~',
                            //       style: TextStyle(
                            //           color: const Color(0xffcccccc),
                            //           fontSize: 12),
                            //     ),
                            //   ),
                            // ),
                            ),
                      ),
                    ),
                  ],
                )),
          );
        });
  }
}
